<template>
  <!-- ************************************大屏内容开始************************************ -->
    <div  class="bg-layout" v-for="(item, index) in layout.layoutArr" :key="index">
      <Vue3DraggableResizable
        :x="item.x || 0"
        :y="item.y || 0"
        :w="item.w || 300"
        :h="item.h || 300"
        :draggable="item.draggable || true"
        :resizable="item.resizable || true"
        @dragging="print(index, $event)"
        @resizing="print(index, $event)"
      >
        <div :class="item.className" class="box">
          <slot :name="item.beforeSlot"></slot>
          <component
            :is="item.componentName"
            :options="item.options"
          ></component> 
          <slot :name="item.afterSlot"></slot>
        </div>
      </Vue3DraggableResizable>
    </div>
  <!-- ************************************大屏内容结束************************************ -->
</template>

<script>
export default {

  // 传参
  props: {
    layout: Object,
  },
  created() {
    const { isCache, layoutArr, isClear } = this.layout;
    if (isClear) {
      localStorage.clear();
    }
    if (isCache) {
      layoutArr.forEach((item, index) => {
        let layout = localStorage.getItem("layout" + index) || "{}";
        layout = JSON.parse(layout);
        Object.assign(item, layout);
      });
    }
  },
  methods: {
    print(index, $event) {
      let layout = localStorage.getItem("layout" + index) || "{}";
      layout = JSON.parse(layout);
      Object.assign(layout, $event);
      localStorage.setItem("layout" + index, JSON.stringify(layout));
    },
  },
};
</script>

<style scoped>
.box {
  width: 100%;
  height: 100%;
}
</style>
